<template>
  <view
    v-if="!hide"
    class="radio"
    :style="[getStyle]"
    :class="[`radio--${size2}`, { 'radio--disabled': disabled, 'radio--checked': checked }]"
    @click="handleClick"
  >
    <slot />
  </view>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, onUnmounted, reactive, toRefs, computed } from '@vue/composition-api'
import boundingClientRect from '@/utils/bounding-client-rect'
import getCurrentComponent from '@/utils/get-current-component'
import addUnit from '@/utils/add-unit'
export default defineComponent({
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    label: {
      type: [String, Number],
      default: null,
    },
    size: {
      type: String,
      default: 'md',
    },
    width: {
      type: String,
      default: null,
    },
    marginRight: {
      type: [String, Number],
      default: '',
    },
  },
  options: {
    virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
  },
  emits: ['click'],
  setup(props, { emit }) {
    const { width } = toRefs(props)
    const vm: any = getCurrentComponent()
    const radioParent: any = inject('radioParent', null)
    const state = reactive({
      checked: false,
      hide: false,
      size2: (radioParent && radioParent.size) || props.size,
    })
    const setCheck = (label, value) => {
      state.checked = label === value
    }
    let label
    const handleClick = (e) => {
      if (props.disabled) {
        return
      }
      if (radioParent && radioParent.radioClick) {
        radioParent.radioClick(label)
      }
      emit('click', e)
    }
    const setHide = (hide) => {
      state.hide = hide
    }
    const getStyle = computed(() => {
      const style: any = {}

      if (width?.value) {
        style.width = addUnit(width.value)
      }
      if (props.marginRight) {
        style.marginRight = addUnit(props.marginRight)
      }
      return style
    })
    onMounted(async () => {
      if (radioParent && radioParent.addRadio) {
        let boxInfo

        if (radioParent.collapse) {
          boxInfo = await boundingClientRect('.radio', vm)
        }

        label = props.label !== null ? props.label : radioParent.radioList.length

        radioParent.addRadio({
          label,
          boxInfo,
          vm: {
            setCheck,
            setHide,
          },
        })
      }
    })

    onUnmounted(async () => {
      if (radioParent && radioParent.removeRadio) {
        radioParent.removeRadio(label)
      }
    })

    return {
      ...toRefs(state),
      setCheck,
      handleClick,
      getStyle,
    }
  },
})
</script>
<style lang="scss" scoped>
.radio {
  display: inline-block;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  padding: 11rpx 16rpx;
  background-color: $--bg-body-c;
  color: $--font-primary-c;
  border: 1rpx solid $--bg-body-c;
  border-radius: 12rpx;
  font-size: 24rpx;
  line-height: 32rpx;
  min-width: 104rpx;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  &--checked {
    border-color: rgba(0, 169, 242, 1);
    background-color: rgba(0, 169, 242, 0.05);
    color: rgba(0, 169, 242, 1);
  }
  &--disabled {
    background-color: $--bg-body-c !important;
    border-color: $--bg-body-c !important;
    color: $--font-secondary-c !important;
  }
  &--lg {
    min-width: 190rpx;
  }
}
</style>
